<html>

<head>
    <!-- jq -->
    <script src="/public/jQuery.min.js"></script>
    <!-- jq -->
    <!-- 轮播图 -->
    <link rel="stylesheet" href="/public/swiper-bundle.min.css">
    <script src="/public/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="/css/index/index.css">
    <!-- 轮播图 -->
</head>

<body>
<div id="header">
    <div class="swiperbox">
        <div class="nav">
            <div class="navtop">
                <div class="navimg">
                    <img src="{$web[0]['logo']}" alt="logo" class="logoimg" width="60px">
                </div>
                <p class="logotit">{$web[0]['title']}</p>
            </div>

            <div class="navright">
                {foreach name = "nav" item = "v"}
                <div ><a href="{$v.url}" class="btn-addtabs" >{$v.title}</a></div>
                {/foreach}
            </div>
            <div class="navbut">
                <button class="loginbut"><a href="login">登录</a></button>
                <button class="signbut">注册</button>
            </div>
            <div class="search">
                <input type="text" placeholder="输入想去的地方" class="sinput">
                <img src="/img/telindex/search.png" alt="search" class="simg">
            </div>
            <div class="group">
                <img src="/img/telindex/group.png" alt="group">
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                {foreach name="banner" item="v"}
                <div class="swiper-slide" style="position: relative;">
                    <img src="{$v.image}" alt="" width="100%" height="600px">
                    {if condition="isset($v.title)"}
                    <div class="shade">
                        <div class="shadebox">
                            <p class="shadetit">旷野聚会</p>
                            <p class="shadetext">——来体验自然的美好——</p>
                            <p class="shadea"><a href="#">开启你的梦想之旅吧</a></p>
                        </div>
                    </div>
                    {/if}
                </div>
                {/foreach}
            </div>
        </div>
        <!-- 轮播图 -->
    </div>
</div>
</body>
<script>
    // 轮播图
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 水平切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
            clickable: true,
        },
        // 其他配置选项...
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    })
    // 轮播图
</script>
<style>
    @charset "UTF-8";
    #header {
        width: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        /* 轮播图 */
        /* 轮播图 */
    }

    #header .swiper {
        width: 100%;
    }

    #header .nav {
        width: 90%;
        margin: auto;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-between;
    }

    #header .nav .navtop {
        display: flex;
        justify-content: space-between;
    }

    #header .nav .navtop .navimg .logimg {
        width: 50%;
        height: auto;
    }

    #header .nav .navtop .logotit {
        line-height: 100px;
        font-size: 42px;
        font-weight: bold;
        color: #5C7BDA;
        margin-left: 20px;
        box-sizing: border-box;
    }

    #header .nav .navright {
        display: flex;
        justify-content: space-between;
        font-size: 2rem;
        line-height: 100px;
        margin-left: 18%;
    }

    #header .nav .navright div {
        padding: 0 30px;
        box-sizing: border-box;
    }

    #header .nav .navright div a {
        text-decoration: none;
        color: black;
    }

    #header .nav .navright div:hover {
        background-color: #5C7BDA;
    }

    #header .nav .navright div:hover a {
        color: white;
    }

    #header .nav .navbut {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;
    }

    #header .nav .navbut .loginbut {
        color: #F05E5E;
        border: solid 1px #F05E5E;
        margin-right: 23px;
        padding: 10px 28px;
        border-radius: 20px;
        background-color: white;
    }

    #header .nav .navbut .loginbut a {
        color: #F05E5E;
        text-decoration: none;
    }

    #header .nav .navbut .signbut {
        color: #A3A3A3;
        border: solid #A3A3A3 1px;
        margin-right: 23px;
        padding: 10px 32px;
        border-radius: 20px;
        background-color: white;
    }

    #header .nav .search {
        border: solid 1px #F0F0F0;
        color: #F0F0F0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 45px;
        margin-left: 10%;
        box-sizing: border-box;
        display: none;
        border-radius: 20px;
    }

    #header .nav .search .sinput {
        border: none;
    }

    #header .nav .search .simg {
        width: 2rem;
        height: 2rem;
    }

    #header .nav .group {
        display: none;
    }

    #header .swiperindex {
        width: 100%;
        position: relative;
    }

    #header .shade {
        z-index: 999;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        text-align: center;
        color: white;
        font-size: 1vw;
        box-sizing: border-box;
    }

    #header .shade .shadebox {
        margin-top: 10%;
    }

    #header .shade .shadetit {
        font-size: 6vw;
        box-sizing: border-box;
    }

    #header .shade .shadetext {
        margin-bottom: 2%;
    }

    #header .shade .shadea {
        margin: auto;
        width: 16%;
        padding: 1em 2em;
        box-sizing: border-box;
        border: solid 3px white;
        border-radius: 40px;
    }

    #header .shade .shadea a {
        color: white;
        text-decoration: none;
    }

    @media screen and (max-width: 1920px) {
        #header {
            /* .nav {
                        .navtop {

                            .logotit{
                                font-size: 20px;
                            }
                        }
                        .navright{
                            font-size: 20px;
                        }
                    } */
        }
    }

    @media screen and (max-width: 769px) {
        * {
            font-size: 10px;
        }

        #header .nav .navtop .navimg {
            display: flex;
            align-items: center;
            width: 10%;
        }

        #header .nav .navtop .navimg .logoimg {
            width: 30px;
            height: auto;
        }

        #header .nav .navtop .logotit {
            font-size: 10px;
        }

        #header .nav .navright {
            display: none;
        }

        #header .nav .navbut {
            display: none;
        }

        #header .nav .search {
            display: flex;
            width: 40%;
        }

        #header .nav .search .sinput {
            width: 60%;
        }

        #header .nav .group {
            display: block;
        }

        #header .shade .shadebox .shadea {
            width: 30%;
        }
    }

</style>

</html>
